<template>
  <view>
    <view><h3>聊天室</h3></view>
    <view>
      <view>
        <textarea
          type="textarea"
          :auto-height="true"
          :rows="10"
          :max-height="20"
          placeholder="聊天内容"
          v-model="chatMessage"
        ></textarea>
      </view>
      <view style="margin-top: 20px;">
  <!--      {{ chatMessageVo }} -->
        <form inline class="demo-form-inline">
          <view class="form-item">
            <input v-model="chatMessageVo.nickname" style="width: 600rpx;" placeholder="发送端："></input>

            <input v-model="chatMessageVo.target" style="width: 600rpx;" placeholder="接收端："></input>
            <input v-model="chatMessageVo.content" style="width: 600rpx;" placeholder="请输入消息"></input>
          </view>
          <view class="form-item">
            <button type="primary" @click="onSiMessage()">私聊</button>
            <button type="primary" @click="onQunMessage()">群聊</button>

            <button type="primary" @click="onOpen">连接服务器</button>
            <button type="primary" @click="onQun">加入群聊</button>
            <button type="primary" @click="onClose">断开连接</button>
          </view>
        </form>
      </view>
    </view>
  </view>
</template>
<script>
    export default {
        data() {
            return {
                chatMessage: '',

                chatMessageVo: {
                    code:"",  
                    nickname: '',
                    type: '',
                    target: '',
                    content: '',
                },

                websocket: null,
            }
        },
        mounted() {
            
        },
        methods: {

            //连接  10001
            //私聊  10002  1
            //群聊  10003  2 

            // onSiMessage
            onSiMessage() {
                //    
                 this.chatMessageVo.code = "10002";  
                 this.chatMessageVo.type = "1";  
                //完善 数据
                let msg = JSON.stringify(this.chatMessageVo);
                //转成 json 报文消息    
                this.websocket.send(msg);
            },
            // onQunMessage
            onQunMessage() {
                //    
                 this.chatMessageVo.code = "10002"; 
                 this.chatMessageVo.type = "2";   
                //完善 数据
                let msg = JSON.stringify(this.chatMessageVo);
                //转成 json 报文消息    
                this.websocket.send(msg);
            },
            // Qun 加入群聊 
            onQun() {
                //    
                 this.chatMessageVo.code = "10003"; 
                //完善 数据
                let msg = JSON.stringify(this.chatMessageVo);
                //转成 json 报文消息    
                this.websocket.send(msg);
            },
        

            // 连接服务器
            onOpen() {
                let url = "ws://localhost:12424/ws";
                
                // 打开一个websocket
                this.websocket = new WebSocket(url);
                
                // 建立连接
                this.websocket.onopen = this.open;

                // 客户端接收服务端返回的数据
                this.websocket.onmessage = this.getMessage;
                // 发生错误时
                this.websocket.onerror = this.error;
                // 关闭连接
                this.websocket.onclose = this.close;
            },
            // 断开服务器
            onClose() {
                this.websocket.close()
            },
            
            // 以下为websocket回调函数
            open() {
                console.log("socket连接成功")
                //    
                this.chatMessageVo.code = "10001";  
                //完善 数据
                let msg = JSON.stringify(this.chatMessageVo);

                // 发送消息
                this.doSendMessage(msg);
            },
            error() {
                console.log("连接错误")
            },

            getMessage(msg) {
                console.log('getMessage', msg.data);
                this.chatMessage = this.chatMessage + '\n';
                this.chatMessage = this.chatMessage + msg.data;
                console.log('getMessage2', this.chatMessage);
            },

            close() {
                console.log("socket已经关闭")
            },
            doSendMessage(msg) {
                this.websocket.send(msg);
            }
        }
    }
</script>

<style>
</style>